/*
 * @Author: xiaosihan 
 * @Date: 2022-07-11 07:51:56 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-27 11:58:40
 */
import utils from "@utils";
import { useEffect, useRef, useState } from "react";
import homeRenderer from "./homeRender";
import styles from './index.module.less';
import iconPNG from "./img/icon.png";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import queryString from "query-string";
import axios from "axios";

const Home = () => {

    const dom = useRef<HTMLImageElement | null>(null);
    const [imgs, setImgs] = useState<Array<any>>([]);
    const [index, setIndex] = useState(0);

    useEffect(() => {
        const scene = utils.getQueryString("scene");
        if (scene) {
            (async () => {
                const datas = (await axios.get("./config.json")) as any;
                const data = datas.data.find((d: any) => d.name === scene);
                if (data) {
                    setImgs(data.imgs);
                }
            })()


        }

        const fristOption = () => {
            document.removeEventListener("touchStart", fristOption);
            if (dom.current) {
                dom.current.style.display = "none";
            }
        }
        if (dom.current) {
            document.addEventListener("touchstart", fristOption);
        }
    }, []);

    useEffect(() => {
        const img = imgs[index];
        if (img) {
            homeRenderer.setMesh(img.glb);
            homeRenderer.setVidoe(img.video);
        }
    }, [imgs, index]);

    //上一个
    const pre = () => {
        setIndex((index + imgs.length - 1) % imgs.length);
    }

    //下一个
    const next = () => {
        setIndex((index + 1) % imgs.length);
    }

    return (
        <div className={styles.home} >
            <div ref={dom => homeRenderer.setContainer(dom)} className={styles.container}></div>
            <img ref={dom} className={styles.start} src={iconPNG} alt="" />
            <div className={styles.btns} >
                <LeftOutlined className={styles.left} onClick={pre} />
                <RightOutlined className={styles.right} onClick={next} />
            </div>
        </div>
    );
}

export default Home;